// 通用样式
@import './variables.scss';

// 布局相关
.container {
  max-width: $container-max-width;
  margin: 0 auto;
  padding: 0 $spacing-medium;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -#{$spacing-small};
}

.col {
  flex: 1;
  padding: 0 $spacing-small;
}

// 网格系统
@for $i from 1 through 12 {
  .col-#{$i} {
    flex: 0 0 percentage($i / 12);
    max-width: percentage($i / 12);
    padding: 0 $spacing-small;
  }
}

// 响应式网格
@include respond-to(sm) {
  @for $i from 1 through 12 {
    .col-sm-#{$i} {
      flex: 0 0 percentage($i / 12);
      max-width: percentage($i / 12);
    }
  }
}

@include respond-to(md) {
  @for $i from 1 through 12 {
    .col-md-#{$i} {
      flex: 0 0 percentage($i / 12);
      max-width: percentage($i / 12);
    }
  }
}

@include respond-to(lg) {
  @for $i from 1 through 12 {
    .col-lg-#{$i} {
      flex: 0 0 percentage($i / 12);
      max-width: percentage($i / 12);
    }
  }
}

// 卡片样式
.card {
  @include card-style;
}

.card-header {
  padding: $spacing-medium;
  border-bottom: 1px solid var(--el-border-color-lighter);
  font-weight: $font-weight-primary;
  font-size: $font-size-medium;
}

.card-body {
  padding: $spacing-medium;
}

.card-footer {
  padding: $spacing-medium;
  border-top: 1px solid var(--el-border-color-lighter);
  background-color: var(--el-fill-color-lighter);
}

// 状态样式
.status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: $border-radius;
  font-size: $font-size-small;
  font-weight: $font-weight-primary;
  
  &::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
  }
  
  &.status-online {
    color: $status-online;
    background-color: mix($status-online, white, 10%);
    
    &::before {
      background-color: $status-online;
    }
  }
  
  &.status-offline {
    color: $status-offline;
    background-color: mix($status-offline, white, 10%);
    
    &::before {
      background-color: $status-offline;
    }
  }
  
  &.status-warning {
    color: $status-warning;
    background-color: mix($status-warning, white, 10%);
    
    &::before {
      background-color: $status-warning;
    }
  }
  
  &.status-unknown {
    color: $status-unknown;
    background-color: mix($status-unknown, white, 10%);
    
    &::before {
      background-color: $status-unknown;
    }
  }
}

// 标签样式
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: $border-radius;
  font-size: $font-size-extra-small;
  font-weight: $font-weight-primary;
  line-height: 1;
  
  &.tag-primary {
    color: $primary-color;
    background-color: mix($primary-color, white, 10%);
    border: 1px solid mix($primary-color, white, 20%);
  }
  
  &.tag-success {
    color: $success-color;
    background-color: mix($success-color, white, 10%);
    border: 1px solid mix($success-color, white, 20%);
  }
  
  &.tag-warning {
    color: $warning-color;
    background-color: mix($warning-color, white, 10%);
    border: 1px solid mix($warning-color, white, 20%);
  }
  
  &.tag-danger {
    color: $danger-color;
    background-color: mix($danger-color, white, 10%);
    border: 1px solid mix($danger-color, white, 20%);
  }
  
  &.tag-info {
    color: $info-color;
    background-color: mix($info-color, white, 10%);
    border: 1px solid mix($info-color, white, 20%);
  }
}

// 徽章样式
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: $font-size-extra-small;
  font-weight: $font-weight-primary;
  line-height: 1;
  color: white;
  background-color: $danger-color;
  
  &.badge-primary {
    background-color: $primary-color;
  }
  
  &.badge-success {
    background-color: $success-color;
  }
  
  &.badge-warning {
    background-color: $warning-color;
  }
  
  &.badge-danger {
    background-color: $danger-color;
  }
  
  &.badge-info {
    background-color: $info-color;
  }
}

// 加载状态
.loading {
  position: relative;
  pointer-events: none;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
}

// 空状态
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-extra-large;
  color: var(--el-text-color-secondary);
  
  .empty-icon {
    font-size: 48px;
    margin-bottom: $spacing-medium;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: $font-size-medium;
    margin-bottom: $spacing-small;
  }
  
  .empty-description {
    font-size: $font-size-small;
    color: var(--el-text-color-placeholder);
  }
}

// 分割线
.divider {
  height: 1px;
  background-color: var(--el-border-color-lighter);
  margin: $spacing-medium 0;
  
  &.divider-vertical {
    width: 1px;
    height: auto;
    margin: 0 $spacing-medium;
  }
}

// 文本样式
.text-primary {
  color: var(--el-color-primary) !important;
}

.text-success {
  color: var(--el-color-success) !important;
}

.text-warning {
  color: var(--el-color-warning) !important;
}

.text-danger {
  color: var(--el-color-danger) !important;
}

.text-info {
  color: var(--el-color-info) !important;
}

.text-muted {
  color: var(--el-text-color-secondary) !important;
}

.text-light {
  color: var(--el-text-color-placeholder) !important;
}

.text-dark {
  color: var(--el-text-color-primary) !important;
}

// 字体大小
.text-xs {
  font-size: $font-size-extra-small !important;
}

.text-sm {
  font-size: $font-size-small !important;
}

.text-base {
  font-size: $font-size-base !important;
}

.text-md {
  font-size: $font-size-medium !important;
}

.text-lg {
  font-size: $font-size-large !important;
}

.text-xl {
  font-size: $font-size-extra-large !important;
}

// 字体粗细
.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: $font-weight-secondary !important;
}

.font-medium {
  font-weight: $font-weight-primary !important;
}

.font-bold {
  font-weight: $font-weight-bold !important;
}

// 背景色
.bg-primary {
  background-color: var(--el-color-primary) !important;
}

.bg-success {
  background-color: var(--el-color-success) !important;
}

.bg-warning {
  background-color: var(--el-color-warning) !important;
}

.bg-danger {
  background-color: var(--el-color-danger) !important;
}

.bg-info {
  background-color: var(--el-color-info) !important;
}

.bg-light {
  background-color: var(--el-fill-color-lighter) !important;
}

.bg-dark {
  background-color: var(--el-fill-color-dark) !important;
}

.bg-white {
  background-color: var(--el-bg-color) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

// 边框
.border {
  border: 1px solid var(--el-border-color-light) !important;
}

.border-top {
  border-top: 1px solid var(--el-border-color-light) !important;
}

.border-right {
  border-right: 1px solid var(--el-border-color-light) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--el-border-color-light) !important;
}

.border-left {
  border-left: 1px solid var(--el-border-color-light) !important;
}

.border-none {
  border: none !important;
}

// 圆角
.rounded {
  border-radius: $border-radius !important;
}

.rounded-sm {
  border-radius: $border-radius-small !important;
}

.rounded-lg {
  border-radius: 8px !important;
}

.rounded-full {
  border-radius: $border-radius-circle !important;
}

.rounded-none {
  border-radius: 0 !important;
}

// 阴影
.shadow {
  box-shadow: $box-shadow-base !important;
}

.shadow-sm {
  box-shadow: $box-shadow-lighter !important;
}

.shadow-lg {
  box-shadow: $box-shadow-light !important;
}

.shadow-xl {
  box-shadow: $box-shadow-dark !important;
}

.shadow-none {
  box-shadow: none !important;
}

// 过渡动画
.transition {
  transition: $transition-base !important;
}

.transition-none {
  transition: none !important;
}

// 变换
.transform {
  transform: translateZ(0);
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

// 透明度
.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

// 可见性
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

// 显示/隐藏
.block {
  display: block !important;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.hidden {
  display: none !important;
}